<template>
  <el-container class="page-main-v">
    <el-container class="content-v">
      <el-input
        v-model="userName"
        placeholder="用户名（admin）"
        prefix-icon="el-icon-user-solid"
      ></el-input>
      <el-input
        placeholder="密码（123456）"
        v-model="password"
        show-password
        prefix-icon="el-icon-lock"
        style="margin-top: 15px;"
      ></el-input>
      <el-button type="primary" style="margin-top: 15px;" @click="login()"
        >登录</el-button
      >
    </el-container>
  </el-container>
</template>
<script>
//import { post } from "../../api/http.js";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  created() {
  },
  methods: {
    ...mapActions({
      setUserInfo: "setUserInfo",
    }),
    /**
     * 点击登录
     */
    login() {
      var that = this;
      var _userName = this.userName;
      var _password = this.password;
      //调用登录接口
      if (_userName && _password) {
        const loading = this.$loading({
          lock: true,
          text: "正在登陆...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(function() {
          var resultParam = {};
          if (_userName == "admin" && _password == "123456") {
            //模拟用户数据
            var userInfo = {
              userName: "admin",
              mobile: "18277777777",
              token: "REWHUI4343HUIFHDS3942HFDSH",
            };
            //清空localstoarge缓存
            localStorage.setItem("messageStore", "");
            //缓存用户信息到localstoarge
            that.setUserInfo(userInfo);
            that.$router.replace("/");
            loading.close();
            this.$message({
              message: "登录成功！",
              type: "success",
            });
          } else {
            loading.close();
            this.$message.error("账号密码错误");
          }
          
          return resultParam;
        }, 2000);
      } else {
        this.$message.error("账号密码不能为空！");
        return false;
      }

      /* this.$refs[formName].validate((valid) => {
        if (valid) {
          //发送请求
          return new Promise((resolve, reject) => {
            post("/users/register", data)
              .then((response) => {
                console.log(response);
                resolve();
              })
              .catch((error) => {
                reject(error);
              });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      }); */
    },
  },
};
</script>
<style>
.page-main-v {
  height: 100%;
}
.content-v {
  display: flex;
  flex-direction: column !important;
  align-items: center;
  width: 100%;
  height: 100%;
}
.el-input {
  width: 300px !important;
}
.el-button {
  width: 300px !important;
}
</style>
